<!DOCTYPE html>
<html>

	<head>
		<title>Document</title>
	</head>

	<body>
		<canvas id="canvas" width="500px" height="500px"> </canvas>
	</body>
	<script type="text/javascript">
		function draw() {
			var canvas = document.getElementById("canvas");
			var cxt = canvas.getContext("2d");
			for(var j = 0; j < 30; j++) {
				var x = Math.floor(Math.random() * 400);
				var y = Math.floor(Math.random() * 400);
				var r = Math.floor(Math.random() * 40);
				cxt.save();
				cxt.translate(x, y);
				drawStar(cxt, r);
				cxt.restore();
			}
		}

		function drawStar(cxt, r) {

			cxt.save();
			cxt.translate(200, 200)
			cxt.beginPath();
			cxt.moveTo(r, 0);
			for(var i = 0; i < 10; i++) {
				cxt.rotate(Math.PI / 5);
				if(i % 2 == 0) {
					cxt.lineTo(r * 0.3, 0);
				} else {
					cxt.lineTo(r, 0);
				}

			}
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
		}
		draw();
	</script>
	</html>